<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script src="../js/vue.js"></script>
<!-- 

    1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
    2.为什么要有这个关系：让组件实例对象可以访问到Vue原型对象上的属性、方法 
     
-->

<body>
    <div id="root">
        <school></school>
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.prototype.x = 99;
        //定义school组件
        const school = Vue.extend({
            name:"school",
            template:`
            <div>
                <h1>学校:{{name}}</h1>
                <h1>地址:{{address}}</h1>
                <button @click="show">点我输出x</button>
            </div>
            `,
            data() {
                return {
                    name:"尚硅谷",
                    address:"北京"
                }
            },
            methods: {
                show(){
                    alert(this.x);
                }   
            }
        });

        new Vue({
            el:"#root",
            //注册组件
            components:{
                school
            }
        })
    </script>
</body>

</html>